<template>
  <el-cascader v-model="value" :props="props" @change="valuechange"></el-cascader>
</template>

<script>
import { mapGetters } from "vuex";
import { asyncGetVideoList } from "../../plugins/api.js";
import _ from "underscore";
export default {
  name: "videolist",
  computed: mapGetters(["getVideoCategories"]),
  props: ["updatedvideoId"],
  data() {
    return {
      value: "",
      options: [],
      props: {
        lazy: true,
        lazyLoad: async (node, resolve) => {
          const { level, value } = node;
          if (!level) {
            resolve(
              _.map(this.getVideoCategories, v => ({
                value: v.CateId,
                label: v.CateName
              }))
            );
          } else if (level == 1) {
            try {
              const { VideoList } = await asyncGetVideoList({
                RegionId: "default",
                CateId: value,
                PageNo: 1,
                PageSize: 99
              });
              let data;
              if (VideoList && VideoList.Video) {
                data = _.map(VideoList.Video, (v, key) => ({
                  value: key,
                  label: v.Title
                }));
              } else {
                data = [];
              }
              this.options = VideoList.Video;
              resolve(data);
            } catch (err) {
              resolve([]);
            }
          } else {
            resolve([]);
          }
        }
      }
    };
  },
  methods: {
    valuechange(v) {
      if (v.length === 2) {
        this.updatedvideoId(
          this.options[v[1]].VideoId,
          this.options[v[1]].Title
        );
      } else {
        this.updatedvideoId("", "");
        this.value = [];
      }
    }
  }
};
</script>
